<template>
  <el-menu
    active-text-color="#FFFFFF"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    text-color="#fff"
    @select="selectMenuItem"
  >
    <el-menu-item index="1">
      <el-icon><Grid /></el-icon>
      <span>图书柜管理</span>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><Menu /></el-icon>
      <span>区域管理</span>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><UserFilled /></el-icon>
      <span>读者管理</span>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><Avatar /></el-icon>
      <span>用户管理员</span>
    </el-menu-item>
    <el-menu-item index="5">
      <el-icon><Operation /></el-icon>
      <span>配置管理</span>
    </el-menu-item>
    <el-menu-item index="6">
      <el-icon><Operation /></el-icon>
      <span>配置中心</span>
    </el-menu-item>
    <el-menu-item index="7">
      <el-icon><Notebook /></el-icon>
      <span>图书管理</span>
    </el-menu-item>
    <el-menu-item index="8">
      <el-icon><List /></el-icon>
      <span>借阅书籍总览</span>
    </el-menu-item>
    <el-sub-menu index="9">
      <template #title>
        <el-icon><Tickets /></el-icon>
        <span>日志查看</span>
      </template>
      <el-menu-item index="9-1">
        <el-icon><SetUp /></el-icon>
        设备操作日志
      </el-menu-item>
      <el-menu-item index="9-2">
        <el-icon><ScaleToOriginal /></el-icon>
        系统操作日志
      </el-menu-item>
      <el-menu-item index="9-3">
        <el-icon><Document /></el-icon>
        借阅日志
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import {
  Document,
  ScaleToOriginal,
  SetUp,
  Tickets,
  DataLine,
  Notebook,
  List,
  Operation,
  Avatar,
  UserFilled,
  Menu,
  Grid,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// const defaultActive = ref("1");
const selectMenuItem = (index) => {
  switch (index) {
    case "1":
      router.push("/cabinet");
      break;
    case "2":
      router.push("/area");
      break;
    case "3":
      router.push("/reader");
      break;
    case "4":
      router.push("/user");
      break;
    case "5":
      router.push("/config");
      break;
    case "6":
      router.push("/configCenter");
      break;
    case "7":
      router.push("/books");
      break;
    case "8":
      router.push("/borrow");
      break;
    case "9-1":
      router.push("/equipLog");
      break;
    case "9-2":
      router.push("/sysLog");
      break;
    case "9-3":
      router.push("/borrowLog");
      break;
  }
};
// selectMenuItem(defaultActive.value);
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  .el-menu-item {
    height: 42px;
    border-bottom: 1px solid #494848;
  }
  .is-active.el-menu-item {
    background: #2db9ee;
  }
}
</style>